import React from 'react';
import { observer, inject } from 'mobx-react';
import { toJS } from 'mobx';
import classNames from 'classnames';
import _u from '../../../utils';
import _ from 'lodash';
import If from '../../../common/if';
import { Icon, Tools } from 'weaver-mobile';
import { getWeekList } from '../../../utils/getWeekList';
import './index.less';

const getLabel = Tools.getLabel; 

@observer
@inject('formStatisticsStore')
export default class WeekList extends React.Component {
  constructor(props) {
    super(props);

    this.store = props.formStatisticsStore;
    this.state = {
      weekList: [],
      index: 0
    }
  }

  componentDidMount() {
    const { appMsg, date } = this.store;
    const { createDate } = appMsg;
    const startDate = new Date(createDate);
    const weekList = getWeekList(startDate);
   
    this.getInd();
    this.setState({ weekList });
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.visible !== this.props.visible && nextProps.visible) {
      this.getInd();
    }
  }

  getInd = () => {
    const { weekList } = this.state;
    const { date } = this.store;

    if (_.isArray(toJS(date))) {
      const start = date[0];

      weekList.forEach((week, index) => {
        if (week.start.getTime() <= new Date(date[0]).getTime() && week.end.getTime() > new Date(date[0]).getTime()) {
          this.setState({ index }, () => {
            this.scroll();
          });

          return;
        }
      });
    }
  }

  scroll = () => {
    const { weekList, index } = this.state;

    if (weekList.length > 7) {
      const scrollTop = (index - 6) * 40; 

      document.getElementsByClassName('wea-edc-mobile-weeklist')[0].scrollTop = scrollTop;
    }
  }

  formatDate = date => {
    date = _u.dateFormat('YY-mm-dd', date);
    date = date.split('-');

    date = Number(date[0]) + '/' + Number(date[1]) + '/' + Number(date[2]);

    return date;
  }

  onSelect = date => {
    const { onSelect } = this.props;

    date = [_u.dateFormat('YY-mm-dd', date.start), _u.dateFormat('YY-mm-dd', date.end)];

    onSelect(date);
  }

  render () {
    const { visible } = this.props;
    const { weekList } = this.state;
    const { date } = this.store;

    return (
      <div className={classNames('wea-edc-mobile-weeklist', { 
        'wea-edc-mobile-weeklist-hide': !visible,
        'wea-edc-mobile-weeklist-has-back': window.backBtnAble
        })}>
        {
          weekList.map(week => (
            <li
              onClick={() => this.onSelect(week)}
              className={classNames({'checked': week.start.getTime() === new Date(date[0]).getTime()})}
            >   
                <span>
                <span>{this.formatDate(week.start)}</span>&nbsp;({getLabel(523304, '周一')})
                  &nbsp;&nbsp;~&nbsp;&nbsp; 
                  <span>{this.formatDate(week.end)}</span>&nbsp;({getLabel(523305, '周日')})
                </span>
                <If condition={week.start.getTime() === new Date(date[0]).getTime()}>
                  <Icon type={'check'} size='xs' ></Icon>
                </If>
            </li>
            )
          )
        }
      </div>
    )
  }
}